 // 1、获取节点
 let div = document.querySelector('div'),
 ulLis = document.querySelectorAll('.ul li'),
 olLis = document.querySelectorAll('.ol li');
 prev = document.querySelector('#goPrev'),
 next = document.querySelector('#goNext');
// 设置当前图片的下标
let index = 0;
// 设置上一张照片的下标
let lastIndex = 0;
// 2、给ol下的小li绑定点击事件
olLis.forEach((li,k) => {
 li.onclick = function(){
     // 交换当前照片上一张照片的下标
     lastIndex = index;
     // 把当前的下标赋给index
     index = k;
     changeImg();
     console.log(lastIndex,index);
 }

}) 
// 3、给左右按钮绑定点击事件
next.onclick = function(){
 lastIndex = index;
 index++; 
 // 判断下标是否大于下标的最大值，大于则把下标设置成最小值
 if(index > ulLis.length-1){
     index = 0;
 }
 changeImg();
}
prev.onclick = function(){
 // 把当前图片的下标赋给上一张照片
 lastIndex = index;
 // 当前图片的下标--
 index--;
 // 判断下标是否小于0，小于0则把下标设置成最大值
 if(index < 0){
     index = ulLis.length - 1;
 }
 changeImg();
}
// 4、自动转动的效果
var timer;
function autoPlay(){
 timer = setInterval(function(){
     // 调用左按钮点击事件
     next.onclick();
},3000)
}
// 5、给div绑定移入移出事件
div.onmouseover = function(){
 // 清除定时器
 clearInterval(timer)
}
div.onmouseout = function(){
 // 调用自动转动方法
 autoPlay();
}
// 6、获取图片函数
function changeImg(){
 // 获取所有类名为ac的标签并把类名改为空
 document.querySelector('ul .ab').className = '';
 document.querySelector('.ol .ab').className = '';
 // 给当前的节点对象添加类名ac
 ulLis[index].className = 'ab';
 olLis[index].className = 'ab';
}
